<template>
  <div class="article-content">
    <div class="author-item">
      <avatar :avatar="articleDetail.avatar"/>
      <div class="des">
        <p class="name">
          <span class="username">{{ articleDetail.username }}</span>
          <level :level="articleDetail.level"/>
        </p>
        <p class="introduction"><span style="margin-right: 20px">{{parseTime.parseDateTime(articleDetail.publishTime)}}</span>   阅读 {{articleDetail.scanNum}}</p>
      </div>
    </div>
    <article>
      <h1 class="title">{{articleDetail.title}}</h1>
      <p class="description">{{articleDetail.description}}</p>
      <hr style="margin: 20px 0">
      <p v-html="articleDetail.content"></p>
    </article>
  </div>
</template>

<script>
import Level from "@/components/level";
import Avatar from "@/components/avatar";
export default {
  name: "article-content",
  components: {Avatar, Level},
  props: {
    articleDetail: Object
  }
}
</script>

<style lang="less" scoped>
.article-content {
  width: 800px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 20px;
  margin-right: 10px;

  article{
    width: 760px;
    word-break: break-all;
    .title{
      font-size: 40px;
      margin: 20px 0;
    }
    .description{
      font-size: 20px;
      margin: 20px 0;
    }

    /deep/ p,/deep/ h1,/deep/ h2{
      margin: 20px 0;
    }
    /deep/ img{
      width: 100%;
    }
    /deep/ pre{
      background-color: #f8f8f8;
      padding: 20px 10px;
      border-radius: 4px;
    }
  }
}

.author-item {
  .flex-center();
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f1f1;
  img {
    .size(50px);
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
  }

  .des {
    .name {
      font-size: 16px;
      margin-bottom: 4px;
      .flex-center();

      .username {
        max-width: 700px;
        .text-ellipse();
        margin-right: 10px;
        font-weight: bold;
        font-size: 18px;
      }
    }

    .introduction {
      width: 700px;
      .text-ellipse();
      font-size: 14px;
      color: #909090;
    }
  }
}
</style>